<template>
  <main class="xpage-detail page-record">
    <nut-cell :title="state.canopyName" class="van-hairline--bottom" @click="show = true">
      <template v-slot:link>
        {{ state.time }}
       <div class="btn-change">切换 <nut-icon name="triangle-down"></nut-icon></div>
      </template>
    </nut-cell>
    <nut-datepicker
      v-model="currentDate"
      v-model:visible="show"
      :min-date="minDate"
      :max-date="maxDate"
      :is-show-chinese="false"
      :three-dimensional="false"
      @confirm="confirm"
    ></nut-datepicker>

    <div class="nut-collapse-item">
        <div class="collapse-item">
            <div class="collapse-title">{{ state.time }}</div>
        </div>
    </div>
    <div class="valve-record">
      <div class="history-list">
        <nut-grid reverse :gutter="0" :border="false">
          <nut-grid-item>设备名称</nut-grid-item>
          <nut-grid-item>开始时间</nut-grid-item>
          <nut-grid-item>结束时间</nut-grid-item>
          <nut-grid-item>持续时间</nut-grid-item>
        </nut-grid>
        <nut-grid
          reverse
          :gutter="1"
          :border="false"
          v-for="(item, index) in state.wxfkHistoryList"
          :key="index"
        >
          <nut-grid-item>{{ item.devices?.name }}</nut-grid-item>
          <nut-grid-item>{{
            item.startTime?.substring(item.startTime.length - 9, item.startTime.length)
          }}</nut-grid-item>
          <nut-grid-item>{{
            item.endTime?.substring(item.startTime.length - 9, item.startTime.length)
          }}</nut-grid-item>
          <nut-grid-item>{{ item.continueTime }}</nut-grid-item>
        </nut-grid>
        <div class="no-data" v-if="state.wxfkHistoryList.length<=0">暂无数据</div>
      </div>
    </div>
  </main>
</template>

<script lang="ts" setup>
import Taro from '@tarojs/taro'
import { formatDate } from '@/common/util'
import { usePullDownRefresh, useReachBottom } from '@/hooks/life'
import { ref, onMounted, reactive } from 'vue'
import { useDidShow, useTabItemTap, useLoad } from '@tarojs/taro'
import { wxfkHistoryListData } from '@/services/apis/history'
const state = reactive({
  canopyId: '',
  canopyName: '',
  wxfkHistoryList: [],
  time: formatDate(Date.now(), 'Y-M-D')
})
useLoad(option => {
  state.canopyId = option.id
  state.canopyName = decodeURIComponent(option.canopyName)
  init()
})
const show = ref(false)
const minDate = new Date(2010, 0, 1)
const maxDate = new Date(2030, 10, 1)
const currentDate = new Date()
const confirm = ({ selectedValue, selectedOptions }) => {
  state.time = selectedOptions.map(option => option.text).join('-')
  init()
}
const init = () => {
  state.wxfkHistoryList = []
  wxfkHistoryListData(state.canopyId, state.time).then(data => {
    state.wxfkHistoryList = data.data
  })
}
</script>

<style lang="scss">
@import '@/assets/styles/index.scss';
$border-radius: 6px;
.page-record {
  .nut-cell {
    margin-top: 0;
    margin-bottom: 0;
    padding: 13px 10px;
    box-shadow: none;
    border-radius: 0;
    font-size: $font-size-1;
    color: #666;
  }
  .nut-cell__title{
    font-size: $font-size-3;
    color: #000;
  }
  .nut-cell__icon {
    margin-right: 5px;
    border-radius: $border-radius;
    overflow: hidden;
  }
  .nut-icon__img {
    width: 40px;
    height: 40px;
  }
  .nut-cell__value {
    font-size: $font-size-0;
    color: #666;
  }
    .nut-collapse-item{
        .collapse-item {
            background: none;
            font-size:12px;
        }
    }
  .valve-record {
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
  }
  .collapse-item {
    padding: 8px 15px;
  }
  .history-list {
    padding:0 0 10px 0;
    font-size: $font-size-1;
    .nut-grid-item__content {
      padding: 5px;
      line-height: 22px;
      text-align: center;
      @include multi-ellipsis(1);
    }
    .nut-grid {
      &:nth-child(odd) {
        .nut-grid-item__content {
          background: #FAFAFA;
        }
      }
    }
    .no-data{
        padding: 10px 0;
        text-align: center;
        font-size: 12px;
        color: #999;
    }
  }
  .btn-change{
    position: relative;
    margin-left: 10px;
    padding: 0 0 0 5px;
    display: flex;
    align-items: center;
    height: 18px;
    font-size: 12px;
    color: #499D2F;
    border: 0.5px solid #499D2F;
    border-radius: 2px;
    .nutui-iconfont{
        font-size: 10px;
    }
  }
}
</style>
